<!-- src/views/outbound/ggg/ggg.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import { getOutboundOrderPackageApi } from '@/api/outbound/outboundOrderPackage';
import { chengZhongApi } from '@/api/outbound/outboundOrderWeights';
import { getUserListApi } from '@/api/user.js';
import { ElMessage, ElMessageBox } from 'element-plus';

// 表格数据相关
const tableData = ref([]);
const loading = ref(false);
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
});

// 搜索表单
const searchForm = ref({
  invoiceCode: ''
});

// 用户列表数据（包括客户和员工）
const userList = ref([]);

// 查询出库订单包装列表
const fetchOutboundOrderPackageList = async () => {
  loading.value = true;
  try {
    const res = await getOutboundOrderPackageApi(
      pagination.value.page,
      pagination.value.pageSize,
      searchForm.value.invoiceCode,
      3
    );
    tableData.value = res.data.rows;
    pagination.value.total = res.data.total;
  } catch (error) {
    ElMessage.error('获取出库订单包装列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取用户列表（包括客户和员工）
const fetchUserList = async () => {
  try {
    const res = await getUserListApi();
    userList.value = res.data;
  } catch (error) {
    ElMessage.error('获取用户列表失败');
  }
};

// 根据用户ID获取用户名称
const getUserName = (userId) => {
  if (!userId) return '未分配';
  const user = userList.value.find(item => item.id == userId);
  return user ? user.name : '未知用户';
};

// 获取打包状态文本
const getPackStatusText = (status) => {
  switch (status) {
    case 1: return '未打包';
    case 2: return '打包中';
    case 3: return '打包完成';
    default: return '未知状态';
  }
};

// 获取称重状态文本
const getWeighingStatusText = (status) => {
  switch (status) {
    case 1: return '未称重';
    case 2: return '已称重';
    default: return '未知状态';
  }
};

// 分页处理
const handlePageChange = (page) => {
  pagination.value.page = page;
  fetchOutboundOrderPackageList();
};

// 搜索处理
const handleSearch = () => {
  pagination.value.page = 1;
  fetchOutboundOrderPackageList();
};

// 重置搜索
const resetSearch = () => {
  searchForm.value.invoiceCode = '';
  pagination.value.page = 1;
  fetchOutboundOrderPackageList();
};

// 称重操作
const handleWeighing = (row) => {
  ElMessageBox.confirm(
    `确定要对商品 "${row.title}" 进行称重操作吗？`,
    '确认称重',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      await chengZhongApi(row.id);
      ElMessage.success('称重操作成功');
      fetchOutboundOrderPackageList(); // 重新加载数据
    } catch (error) {
      ElMessage.error('称重操作失败');
    }
  }).catch(() => {
    // 用户取消操作
  });
};

onMounted(() => {
  fetchOutboundOrderPackageList();
  fetchUserList();
});
</script>

<template>
  <div class="outbound-order-package-container">

    <!-- 搜索区域 -->
    <div class="toolbar">
      <div class="toolbar-right">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="发货单号">
            <el-input 
              v-model="searchForm.invoiceCode" 
              placeholder="请输入发货单号" 
              clearable 
              style="width: 200px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
            <el-button icon="Refresh" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 出库订单包装表格 -->
    <el-table 
      :data="tableData" 
      v-loading="loading" 
      border 
      style="width: 100%; margin-top: 20px;"
    >
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="invoiceCode" label="发货单号" min-width="180" />
      <el-table-column prop="code" label="商品编码" width="120" />
      <el-table-column prop="title" label="商品名称" width="120" />
      <el-table-column prop="preCount" label="发货数量" width="100" />
      <el-table-column prop="bePackNum" label="待打包数量" width="120" />
      <el-table-column prop="donePackNum" label="已打包数量" width="120" />
      <el-table-column prop="productWeight" label="商品重量" width="100" />
      <el-table-column prop="productVolume" label="商品体积" width="100" />
      <el-table-column prop="customerId" label="客户" width="120">
        <template #default="scope">
          {{ getUserName(scope.row.customerId) }}
        </template>
      </el-table-column>
      <el-table-column label="打包员工" width="120">
        <template #default="scope">
          {{ getUserName(scope.row.packEmpId) }}
        </template>
      </el-table-column>
      <el-table-column prop="isPackStatus" label="打包状态" width="100">
        <template #default="scope">
          {{ getPackStatusText(scope.row.isPackStatus) }}
        </template>
      </el-table-column>
      <el-table-column prop="isChengZhong" label="称重状态" width="100">
        <template #default="scope">
          {{ getWeighingStatusText(scope.row.isChengZhong) }}
        </template>
      </el-table-column>
      <el-table-column prop="packTime" label="打包时间" min-width="160" />
      <el-table-column prop="createTime" label="创建时间" min-width="160" />
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            :disabled="scope.row.isChengZhong !== 1"
            @click="handleWeighing(scope.row)"
          >
            称重
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      layout="total, prev, pager, next, jumper"
      :current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="handlePageChange"
      style="margin-top: 20px; text-align: right;"
    />
  </div>
</template>

<style scoped>
.outbound-order-package-container {
  padding: 20px;
  background-color: #fff;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.toolbar-left {
  flex-shrink: 0;
}

.toolbar-right {
  flex: 1;
  min-width: 0;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .toolbar-left {
    margin-bottom: 10px;
  }
  
  .toolbar-right {
    display: flex;
    justify-content: center;
  }
  
  .search-form {
    justify-content: center;
  }
}
</style>